<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>过滤选择器</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

</head>
<body>
    <!-- 基本筛选器
    需求描述：实现隔行变色，让表格的奇数行的背景变为红色，:even代表选取下标为偶数的行 -->
    <table cellspacing="0px" cellpadding="10px" border="1px">
        <tr><td>张三</td><td>男</td><td>21</td></tr>
        <tr><td>李四</td><td>女</td><td>22</td></tr>
        <tr><td>王五</td><td>男</td><td>23</td></tr>
        <tr><td>赵六</td><td>女</td><td>24</td></tr>
        <tr><td>李雷</td><td>男</td><td>24</td></tr>
    </table>

    <script>
        $('tr:even').css('background', 'red');
    </script>
<br>

<!-- 需求描述：实现隔行变色，让表格的偶数行的背景变为红色，:odd代表选取下标为奇数的行 -->
<table cellspacing="0px" cellpadding="10px" border="1px">
    <tr><td>张三</td><td>男</td><td>21</td></tr>
    <tr><td>李四</td><td>女</td><td>22</td></tr>
    <tr><td>王五</td><td>男</td><td>23</td></tr>
    <tr><td>赵六</td><td>女</td><td>24</td></tr>
</table>

<script>
    $('tr:odd').css('background', 'red');
</script>
<br>

<!-- 需求描述：实现让表格的第一行的背景变为红色 -->
<table cellspacing="0px" cellpadding="10px" border="1px">
    <tr><td>张三</td><td>男</td><td>21</td></tr>
    <tr><td>李四</td><td>女</td><td>22</td></tr>
    <tr><td>王五</td><td>男</td><td>23</td></tr>
    <tr><td>赵六</td><td>女</td><td>24</td></tr>
</table>

<script>
    $('tr:first').css('background', 'red');
</script>
<br>

<!-- 需求描述：实现让下标（从0开始）小于2的行数的背景变为红色 -->
<table cellspacing="0px" cellpadding="10px" border="1px">
    <tr><td>张三</td><td>男</td><td>21</td></tr>
    <tr><td>李四</td><td>女</td><td>22</td></tr>
    <tr><td>王五</td><td>男</td><td>23</td></tr>
    <tr><td>赵六</td><td>女</td><td>24</td></tr>
</table>

<script>
    $('tr:lt(2)').css('background', 'red');
</script>
<br>

<!-- 需求描述：实现让下标（从0开始）大于2的行数的背景变为红色 -->
<table cellspacing="0px" cellpadding="10px" border="1px">
    <tr><td>张三</td><td>男</td><td>21</td></tr>
    <tr><td>李四</td><td>女</td><td>22</td></tr>
    <tr><td>王五</td><td>男</td><td>23</td></tr>
    <tr><td>赵六</td><td>女</td><td>24</td></tr>
</table>

<script>
    $('tr:gt(2)').css('background', 'red');
</script>
<br>

<!-- 需求描述：实现让下标（从0开始）等于2的行数的背景变为红色 -->
<table cellspacing="0px" cellpadding="10px" border="1px">
    <tr><td>张三</td><td>男</td><td>21</td></tr>
    <tr><td>李四</td><td>女</td><td>22</td></tr>
    <tr><td>王五</td><td>男</td><td>23</td></tr>
    <tr><td>赵六</td><td>女</td><td>24</td></tr>
</table>

<script>
    $('tr:eq(2)').css('background', 'red');
</script>
<br>

<!-- 需求描述：实现让下标（从0开始）不等于2的行数的背景变为红色 -->
<table cellspacing="0px" cellpadding="10px" border="1px">
    <tr><td>张三</td><td>男</td><td>21</td></tr>
    <tr><td>李四</td><td>女</td><td>22</td></tr>
    <tr><td>王五</td><td>男</td><td>23</td></tr>
    <tr><td>赵六</td><td>女</td><td>24</td></tr>
</table>

<script>
    $('tr:not(tr:eq(2))').css('background', 'red');
    // 需求描述：实现让内容为“男”的单元格的背景变为红色
    $('td:contains("男")').css('background', 'red');
    // 需求描述：实现让内容为span标签的单元格的背景变为红色
    $('td:has(span)').css('background', 'red');
    // 需求描述：实现让内容为空的单元格的背景变为红色
    $('td:parent').css('background', 'red');

</script>
<br>


</body>
</html>